<template>
  <el-container>
    <el-header class="elheader">
      <el-row>
        <el-col :span="22" style="display: flex">
          <!-- <el-form ref="qyeryData" :model="qyeryData" label-width="80px">
            <el-form-item label="用户昵称">
              <el-input v-model="qyeryData.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户账号">
              <el-input v-model="qyeryData.account" clearable></el-input>
            </el-form-item>
          </el-form> -->
        </el-col>
        <el-col :span="2" class="flexend">
          <!-- <el-button type="primary" @click="query">查询</el-button> -->
        </el-col>
      </el-row>
    </el-header>
    <backline />
    <el-main>
      <el-table
        :data="tableData"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children' }"
        @row-click="rowclick"
      >
        <el-table-column prop="ico" label="菜单图标" sortable width="200">
          <template slot-scope="scope">
            <i :class="scope.row.ico"></i> {{ scope.row.ico }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="菜单名称" sortable width="200">
        </el-table-column>
        <el-table-column prop="url" label="菜单路径"> </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { GetMenuTree } from "@/api/sys";
export default {
  data() {
    return { tableData: [] };
  },
  methods: {
    query() {},
    async load() {
      var res = await GetMenuTree();
      this.tableData = res.data;
    },
    rowclick(row, column, event) {
      console.log(row, event, column);
      if (event.currentTarget.querySelector(".el-table__expand-icon")) {
        event.currentTarget.querySelector(".el-table__expand-icon").click();
      }
    },
  },
  async created() {
    await this.load();
  },
};
</script>

<style>
</style>